<template>
  <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData.children"
      border
      style="width: 600px"
      row-key="name"
      default-expand-all
    >
      <el-table-column type="index" width="50">
        <template #header="header">
          <el-checkbox
            v-model="tableData.checked"
            :indeterminate="tableData.isIndeterminate"
            @change="changeAll(tableData)"
          />
        </template>
        <template #default="scope">
          <el-checkbox
            v-model="scope.row.checked"
            :indeterminate="scope.row.isIndeterminate"
            @change="changeGroup(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="菜单名称" prop="name" width="100" />
      <el-table-column label="菜单所属按钮">
        <template #default="scope">
          <div style="display: flex;flex-wrap: wrap" v-if="scope.row.checkList">
            <el-checkbox
              v-for="item in scope.row.checkList"
              :key="item.id"
              v-model="item.checked"
              :label="item.label"
              @change="changeItem()"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-button @click="addRow">增加一行</el-button>
    <el-table :data="tableData2" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.Date"  data-rules="required|minLength:8" v-validate="displayErrors" />
        </template>
        <template #header="{ column, $index }"> {{ $index }} <el-button>点击</el-button> </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="100" />
      <el-table-column prop="address" label="Address">
        <template #default="scope">
          <el-button size="small" type="danger" @click="delRow(scope.$index, scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-switch v-model="value1" :loading="loading1" :before-change="beforeChange1" />
    <CustomElTable
      :table-data="tdata"
      :columns="columns"
      :pager="page"
      @handleSizeChange="clickhandleSizeChange"
      @handleCurrentChange="clickhandleCurrentChange"
    />
    <span id="val">0</span>
    <button @click="aaa">点此 +1</button>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from "vue"
  import { ElTable, FormInstance } from "element-plus"
  import CustomElTable from "@/components/CustomElTable.vue"
  
  const createClick = function () {
    let val = 0
    return () => {
      const valBox = document.getElementById("val")
      valBox!.innerText = ++val
    }
  }
  
  const aaa = createClick()
  
  onMounted(() => {})
  
  const tableData = ref({
    isIndeterminate: true,
    checked: false,
    root: true,
    children: [
      {
        name: "Tom",
        isIndeterminate: false,
        checked: false,
        children: [
          {
            name: "Tom3",
            isIndeterminate: false,
            checked: false,
            children: null,
            checkList: [
              {
                label: "aass",
                checked: false,
              },
              {
                label: "bdfgb",
                checked: false,
              },
              {
                label: "aass",
                checked: false,
              },
              {
                label: "gfgb",
                checked: false,
              },
              {
                label: "asss",
                checked: false,
              },
              {
                label: "bd2gb",
                checked: false,
              },
              {
                label: "gfgbj",
                checked: false,
              },
              {
                label: "asss11",
                checked: false,
              },
              {
                label: "bd2gb22",
                checked: false,
              },
            ],
          },
          {
            name: "Tom4",
            isIndeterminate: false,
            checked: false,
            children: null,
            checkList: [
              {
                label: "aas",
                checked: false,
              },
              {
                label: "bdb",
                checked: false,
              },
            ],
          },
        ],
        checkList: null,
      },
      {
        name: "Tom1",
        isIndeterminate: false,
        checked: true,
        children: null,
        checkList: [
          {
            label: "aga",
            checked: true,
          },
          {
            label: "hwbb",
            checked: true,
          },
        ],
      },
      {
        name: "Tom5",
        isIndeterminate: false,
        checked: false,
        children: null,
        checkList: null,
      },
    ],
  })
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  interface CheckBox {
    checked: boolean
  }
  function changeAll(data: any) {
    data.isIndeterminate = false
    if (data?.children) {
      data.children.forEach((i: any) => {
        i.checked = data.checked
        i.isIndeterminate = false
        if (i?.checkList) {
          i.checkList.forEach((j: any) => {
            j.checked = data.checked
          })
        }
        if (i?.children) {
          changeAll(i)
        }
      })
    }
  }
  function changeGroup(row: any) {
    console.log("row", row)
    row.isIndeterminate = false
    if (row?.checkList) {
      row.checkList.forEach((i: any) => {
        i.checked = row.checked
      })
    }
    if (row?.children) {
      row.children.forEach((i: any) => {
        i.checked = row.checked
        i.isIndeterminate = false
        if (i?.checkList) {
          i.checkList.forEach((j: any) => {
            j.checked = row.checked
          })
        }
      })
    }
    _recursionData(tableData.value)
  }
  function changeItem() {
    _recursionData(tableData.value)
  }
  function _recursionData(data: any) {
    console.log("data", data)
    if (data?.children) {
      let groupCheckBoxA1: CheckBox[] = []
      data.children.forEach((A1: any) => {
        _checkItemNum(A1.checkList, A1)
        if (A1?.children) {
          let groupCheckBoxA2: CheckBox[] = []
          A1.children.forEach((A2: any) => {
            _checkItemNum(A2.checkList, A2)
            groupCheckBoxA2.push({
              checked: A2.checked,
            })
          })
          _checkItemNum(groupCheckBoxA2, A1)
        }
        groupCheckBoxA1.push({
          checked: A1.checked,
        })
      })
      _checkItemNum(groupCheckBoxA1, tableData.value)
    }
  }
  function _checkItemNum(checkboxes: CheckBox[], item: any) {
    if (checkboxes?.length) {
      // 计算选中的复选框数量
      let selectedCount = 0
      for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          selectedCount++
        }
      }
      // 根据选中数量判断选中状态
      if (selectedCount === checkboxes.length) {
        item.checked = true
        item.isIndeterminate = false
      } else if (selectedCount === 0) {
        item.checked = false
        item.isIndeterminate = false
      } else {
        item.checked = false
        item.isIndeterminate = true
      }
    }
  }
  
  // 表格
  const tableData2 = ref([
    {
      date: "2016-05-03",
      name: "Tom111111111111111",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
  ])
  function addRow() {
    tableData2.value.push({
      date: "",
      name: "",
      address: "",
    })
  }
  function delRow(idx: number, row: any) {
    console.log(idx, row)
    tableData2.value.splice(idx, 1)
  }
  
  const columns = [
    { prop: "date", label: "日期", width: "150", align: "left" },
    { prop: "name", label: "姓名", width: "200", align: "center" },
    { prop: "address", label: "地址", width: "auto", align: "center" },
  ]
  const tdata = ref([
    {
      id: 1,
      date: "2020-1",
      name: "张三",
      address: "上海市普陀区金沙江路 1518 弄",
    },
    {
      id: 2,
      date: "2020-2",
      name: "李四",
      address: "上海市普陀区金沙江路 1517 弄",
    },
    {
      id: 3,
      date: "2020-4",
      name: "王五",
      address: "上海市普陀区金沙江路 1519 弄",
    },
    {
      id: 4,
      date: "2016-05-03",
      name: "赵6",
      address: "上海市普陀区金沙江路 1516 弄",
    },
    {
      id: 5,
      date: "2016-05-03",
      name: "李7",
      address: "上海市普陀区金沙江路 1516 弄",
    },
    {
      id: 6,
      date: "2016-05-03",
      name: "刘8",
      address: "上海市普陀区金沙江路 1516 弄",
    },
  ])
  const page = {
    pageNo: 1,
    limit: 10,
    sizes: [10, 20, 30],
    total: 10,
  }
  
  function clickhandleSizeChange(data: string) {
    console.log(data)
  }
  function clickhandleCurrentChange(data: string) {
    console.log(data, "改变当前页码")
  }
  
  import { ElMessage } from "element-plus"
  
  const value1 = ref(false)
  const loading1 = ref(false)
  console.log(tdata)
  const beforeChange1 = () => {
    loading1.value = true
    return new Promise((resolve) => {
      setTimeout(() => {
        loading1.value = false
        ElMessage.success("Switch success")
        return resolve(true)
      }, 1000)
    })
  }
</script>

<style scoped lang="scss"></style>
